<template>

  <el-card shadow="never" class="border-0">
    <!-- 搜索 -->
    <SearchForm :model="searchForm" @search="getList" @reset="resetSearchForm">
      <SearchItem label="">

        <div class="mt-4" style="width: 100%;margin-left: 0px !important;">
          <el-input v-model="searchForm.name" placeholder="用户名" class="input-with-select">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
            <template #append>
              <el-select v-model="searchForm.is_auth" placeholder="请选择认证状态">
                <el-option key="0" label="全部" value="" />
                <el-option key="2" label="未认证" value="0" />
                <el-option key="3" label="待审核" value="3" />
                <el-option key="1" label="已认证" value="1" />
                <el-option key="-1" label="已冻结" value="-1" />
              </el-select>
              <!-- <el-select v-model="searchForm.type" placeholder="选择用户类型">
                <el-option key="0" label="全部" value="" />
                <el-option key="5" label="企业管理员" value="1" />
                <el-option key="2" label="企业员工" value="2" />
                <el-option key="3" label="超级管理员" value="10" />
                <el-option key="4" label="普通用户" value="0" />
              </el-select>
              <el-select v-model="searchForm.is_newuser" placeholder="请选择是否新用户">
                <el-option key="0" label="全部" value="" />
                <el-option key="0" label="新用户" value="0" />
                <el-option key="1" label="老用户" value="1" />
              </el-select> -->
            </template>
          </el-input>
        </div>


      </SearchItem>
    </SearchForm>

    <!-- 新增|刷新 -->
    <ListHeader layout="refresh" @create="handleCreate" @refresh="getList" />

    <el-table :data="tableData" stripe style="width: 100%; text-align: center" v-loading="loading" border>
      <el-table-column type="index" label="序号" width="100" style="text-align: center" align="center " />
      <el-table-column prop="name" label="类型" width="300" style="text-align: center" align="center ">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.type == 0">普通用户</el-tag>
          <el-tag type="success" v-if="scope.row.type == 10">超级管理员</el-tag>
          <el-tag type="primary" v-if="scope.row.type == 1">企业管理员</el-tag>
          <el-tag type="primary" v-if="scope.row.type == 2">企业员工</el-tag>
          <el-tag type="primary" v-if="scope.row.type == 3">企业负责人</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="username" label="用户名" width="100" style="text-align: center" align="center " />
      <el-table-column prop="mobile" label="手机号" width="200" style="text-align: center" align="center " />
      <el-table-column prop="company_name" label="企业名称" width="200" style="text-align: center" align="center " />
      <el-table-column label="认证状态" width="200" style="text-align: center" align="center ">
        <template #default="scope">
          <el-tag type="primary" class="cusor_pointer" v-if="scope.row.is_auth == 1">已认证</el-tag>
          <el-tag type="danger" class="cusor_pointer" v-if="scope.row.is_auth == '-1'">已冻结</el-tag>
          <el-tag type="warning" class="cusor_pointer" @click="returnReasonDetail(scope.row)"
            v-if="scope.row.is_auth == 2">已驳回</el-tag>
          <el-tag type="warning" class="cusor_pointer" v-if="scope.row.is_auth == 3">待审核</el-tag>

          <el-popconfirm title="是否认证或解冻该用户？" confirmButtonText="确认" cancelButtonText="取消"
            @confirm="setUserAuth(scope.row.id, 1)">
            <template #reference>
              <el-tag type="warning" class="cusor_pointer" v-if="scope.row.is_auth == 0"
                style=" cursor: pointer;">未认证</el-tag>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
      <!-- <el-table-column label="是否新用户" style="text-align: center" align="center ">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.is_newuser == 1">否</el-tag>
          <el-tag type="warning" v-else>是</el-tag>
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- <el-button @click="handleEdit(scope.row)" text type="primary" class="p-1">
              <el-icon class="el-icon--left" :size="16">
                <Edit />
              </el-icon>修改
            </el-button> -->

          <el-button @click="iHandleDetail(scope.row)" text type="primary" class="p-1">
            <el-icon class="el-icon--left" :size="16">
              <Edit />
            </el-icon>详情
          </el-button>

          <el-popconfirm title="是否冻结该用户" v-if="scope.row.is_auth == 1" confirmButtonText="确认" cancelButtonText="取消"
            @confirm="setUserAuth(scope.row.id, '-1')">
            <template #reference>
              <el-tag type="warning" class="cusor_pointer">冻结账户</el-tag>
            </template>
          </el-popconfirm>


          <el-popconfirm title="是否解冻结该用户" v-if="scope.row.is_auth == '-1'" confirmButtonText="确认" cancelButtonText="取消"
            @confirm="setUserAuth(scope.row.id, 1)">
            <template #reference>
              <el-tag type="success" class="cusor_pointer">解冻账户</el-tag>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex items-center justify-center mt-5">
      <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
        :page-size="pageSize" @current-change="getList" />
    </div>


    <!-- 新增/修改 -->
    <!-- <FormDrawer destroyOnClose ref="formDrawerRef" size="30%" :title="drawerTitle" @submit="handleSubmit">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="150px" :inline="false">
          <el-form-item label="公司名称" prop="name">
            <el-input v-model="form.name" placeholder="公司名称"></el-input>
          </el-form-item>
  
          <el-form-item label="法人手机号" prop="mobile">
            <el-input v-model="form.mobile" placeholder="法人手机号"></el-input>
          </el-form-item>
  
          <el-form-item label="营业执照编号" prop="license_number">
            <el-input v-model="form.license_number" placeholder="营业执照编号"></el-input>
          </el-form-item>
  
          <el-form-item label="法人身份证号" prop="id_card">
            <el-input v-model="form.id_card" placeholder="法人身份证号"></el-input>
          </el-form-item>
          <el-form-item label="法人姓名" prop="corporation">
            <el-input v-model="form.corporation" placeholder="法人姓名"></el-input>
          </el-form-item>
            
          <el-form-item label="上传营业执照" >
            <UploadFile :data="{img_url:form.license_url,image_license_url:form.image_license_url}" @success="handleUploadSuccess" />
          </el-form-item>
  
        </el-form>
      </FormDrawer> -->
  </el-card>
  <el-dialog v-model="dialogVisible" title="详情" width="70%" height="80%" :before-close="handleClose">

    <el-row :gutter="20">
      <el-col :span="12">
        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">姓名：</span>
          <el-input v-model="detail.first_name" disabled class="w-50 m-2" placeholder="姓名：" />

        </el-row>
        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">昵称：</span>
          <el-input v-model="detail.nickname" disabled class="w-50 m-2" placeholder="昵称：" />
        </el-row>

        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">手机号：</span>
          <el-input v-model="detail.mobile" disabled class="w-50 m-2" placeholder="手机号：" />
        </el-row>

        <el-row>
          <span class="ml-3 w-20 text-gray-600 inline-flex items-center">身份证号：</span>
          <el-input v-model="detail.id_card" disabled class="w-50 m-2" placeholder="身份证号：" />
        </el-row>
      </el-col>
      <el-col :span="12">

        <el-row>
          <el-col :span="12">
            <div>身份证头像面</div>
            <div class="block">
              <el-image style="width: 200px; height: auto;" :src="detail.id_card_front_url" fit="contain" />
            </div>
          </el-col>
          <el-col :span="12">
            <div>身份证国徽面</div>
            <div class="block">
              <el-image style="width: 200px; height: auto;" :src="detail.id_card_back_url" fit="contain" />
            </div>
          </el-col>

        </el-row>
       
      </el-col>
     
    </el-row>
    <template #footer>
          <span class="dialog-footer">
            

            <el-tag type="warning" @click="setUserAuth(detail.id, 1)" v-if="detail.is_auth == 0"  class="cusor_pointer">未认证</el-tag>
            <el-tag type="warning" @click="setUserAuth(detail.id, 1)" v-if="detail.is_auth == 3" class="cusor_pointer">待审核</el-tag>
            <!-- <el-popconfirm title="是否认证该用户？" confirmButtonText="确认" cancelButtonText="取消"
              @confirm="setUserAuth(detail.id, 1)">
              <template #reference>
               
              </template>
            </el-popconfirm> -->
            <el-tag type="danger" @click="dialogVisibleReturn = true" class="cusor_pointer">驳回</el-tag>
            <el-tag @click="dialogVisible = false" class="cusor_pointer">返回</el-tag>
          </span>
        </template>
  </el-dialog>


  <el-dialog v-model="dialogVisibleReturn" title="驳回" width="70%" height="80%" :before-close="dialogVisibleReturnClose">


    <el-row :gutter="20">
      <span class="ml-3 w-35 text-gray-600 inline-flex items-center">驳回原因</span>
      <el-input v-model="returnReason" type="textarea" placeholder="驳回原因:" />
    </el-row>

    <template #footer>
      <span class="dialog-footer">
        
        <el-tag @click="setReturnReason(detail.id, 2)" v-if="detail.is_auth == 0 || detail.is_auth == 3"
          class="cusor_pointer">确定</el-tag>
        <el-tag @click="dialogVisibleReturn = false" class="cusor_pointer">返回</el-tag>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisibleReturnDetail" title="驳回原因" width="70%" height="100%"
    :before-close="dialogVisibleReturnDetailClose">


    <el-row :gutter="20">
      <span class="ml-3 w-35 text-gray-600 inline-flex items-center">驳回原因</span>
      <el-input v-model="returnReason" aria-disabled="true" type="textarea" placeholder="驳回原因:" />
    </el-row>

  </el-dialog>
</template>
<script setup>
// vue 内部方法
import { ref } from 'vue'
import { useStore } from 'vuex'

// 页面组件
import ListHeader from "~/components/ListHeader.vue"
import FormDrawer from "~/components/FormDrawer.vue"
import SearchForm from "~/components/SearchForm.vue"
import SearchItem from "~/components/SearchItem.vue"
import UploadFile from "~/components/UploadFile.vue"
import { Search } from '@element-plus/icons-vue'

// 公共方法
import { useInitTable, useInitForm } from "~/composables/useCommon"
import { goTo, showMessage } from "~/composables/util"
import { httpUrl } from "~/config"


// api
import {
  getUserList,
  getUserInfo,
  setUserInfo,
} from "~/api/user/index"


// 初始化表格
const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  currentPage,
  total,
  pageSize,
  getList,
  handleDelete,
} = useInitTable({
  searchForm: { search: "", id: "", name: "" },
  requestListAPI: getUserList,
  // delete: deleteCompany,
  // pageSize: store.state.pageSize.MessageList,
  pageSize: 10,
  onGetListSuccess: (res) => {
    tableData.value = res.data.results
  },
})

// 初始化表单
const {
  formDrawerRef,
  formRef,
  form,
  rules,
  editId,
  drawerTitle,
  handleSubmit,
  resetForm,
  handleCreate,
  handleEdit,
} = useInitForm({
  getList,
  // create: postCompany,
  // update: putCompany,
  // form: {
  //   name: "",
  //   mobile: "",
  //   license_number: "",
  //   id_card: "",
  //   license_url: "",
  //   corporation: "",
  //   image_id:'',
  // },
  // onGetDataSuccess: (res) => {
  //   // 将接口返回的公司列表数据命名为companyAllList
  //   companyAllList.value = res.data.name;
  // },
  // rules: {
  //   name: [
  //     {
  //       required: true,
  //       message: "公司名称不能为空",
  //       trigger: "blur",
  //     },
  //   ],
  // }

});



// 设置用户认证
const store = useStore()
const setUserAuth = async (id, is_auth) => {
  await setUserInfo({ id: id, is_auth: is_auth }).then((res) => {
    store.dispatch("getUserInfo").then(() => {

    })
  }).finally(() => {
    getList()
    dialogVisible.value = false
  })
}


// 详情
const detail = ref({})
const dialogVisible = ref(false)
// 详情
const iHandleDetail = (row) => {
  let temp = row
  detail.value = temp

  if (!detail.value.id_card_back_url.includes(httpUrl)) {
    detail.value.id_card_back_url = httpUrl + detail.value.id_card_back_url
    detail.value.id_card_front_url = httpUrl + detail.value.id_card_front_url
  }
  dialogVisible.value = true
};


// 驳回
const dialogVisibleReturn = ref(false)
const returnReason = ref('')
const setReturnReason = async (id, is_auth) => {
  if (returnReason.value) {
    await setUserInfo({ id: id, is_auth: is_auth, back_reason: returnReason.value }).then((res) => {
      store.dispatch("getUserInfo").then(() => {

      })
    }).finally(() => {
      getList()
      dialogVisible.value = false
      dialogVisibleReturn.value = false
      returnReason.value = ''
    })
  } else {
    showMessage('驳回原因不能为空!', 'error')
  }

}

// 查看驳回原因
const dialogVisibleReturnDetail = ref(false)
const returnReasonDetail = async (Detail) => {
  returnReason.value = Detail.back_reason
  dialogVisibleReturnDetail.value = true
}

// 关闭弹窗
const dialogVisibleReturnDetailClose = () => {
  dialogVisibleReturnDetail.value = false
}
const dialogVisibleReturnClose = () => {
  dialogVisibleReturn.value = false
}
</script>

<style scoped>
.el-input-group__append:first-child {
  margin: 0 0px !important;
}

.cusor_pointer {
  cursor: pointer;
}
</style>